import { type CSSProperties, useState } from "react";

import CoverImage from "@/assets/images/cover/cover_4.jpg";
import Card from "@/components/card";
import { Iconify } from "@/components/icon";
import { useUserInfo } from "@/store/userStore";
import { useThemeToken } from "@/theme/hooks";

import BasicInfoTab from "./tabs/basic-info-tab";
import AccountInfoTab from "./tabs/account-info-tab";

function UserProfile() {
	const { avatar, username } = useUserInfo();
	const { colorTextBase } = useThemeToken();
	const [currentTabIndex, setcurrentTabIndex] = useState(0);

	const bgStyle: CSSProperties = {
		background: `linear-gradient(rgba(0, 75, 80, 0.8), rgba(0, 75, 80, 0.8)) center center / cover no-repeat, url(${CoverImage})`,
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
	};

	const tabs = [
		{
			icon: <Iconify icon="solar:user-id-bold" size={24} className="mr-2" />,
			title: "基本信息",
			content: <BasicInfoTab />,
		},
		{
			icon: <Iconify icon="mingcute:profile-fill" size={24} className="mr-2" />,
			title: "账户信息",
			content: <AccountInfoTab />,
		},
	];

	return (
		<>
			<Card className="relative mb-6 h-[48px] flex-col  !p-0">
				<div className="z-10 min-h-[48px] w-full">
					<div className="mx-6 flex h-full justify-center">
						{tabs.map((tab, index) => (
							<button
								onClick={() => setcurrentTabIndex(index)}
								key={tab.title}
								type="button"
								style={{
									marginRight: index >= tabs.length - 1 ? "0px" : "40px",
									opacity: index === currentTabIndex ? 1 : 0.5,
									borderBottom:
										index === currentTabIndex
											? `2px solid ${colorTextBase}`
											: "",
								}}
							>
								{tab.icon}
								{tab.title}
							</button>
						))}
					</div>
				</div>
			</Card>
			<div>{tabs[currentTabIndex].content}</div>
		</>
	);
}

export default UserProfile;
